<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script src="../static/js/spark-md5.min.js"></script>
	<script src="../static/js/jquery.min.js"></script>
</head>

<body>
	<input type="file" id="file" />
	<div id="box"></div>
	<div id="md5"></div>
</body>

<script>
	let num = 0;  //主线程要用到的变量

	//子线程向主线程传递消息
	let worker = new Worker('1.js');

	worker.onmessage = ev => {  //接收子线程发回来的消息,事件对象的data属性可以获取 Worker 发来的数据
		$('#md5').text(JSON.parse(ev.data).md5);
	}

	document.querySelector('#file').addEventListener('change', e => {
		var file = e.target.files[0];
		worker.postMessage(file);//向子线程发送message事件
	});

	setInterval(function() {
		num++;
		$("#box").text(num);
	}, 1000);

</script>

</html>